<form> <div class="container wrap"> <div class="basis4 flex"> <input type="text" name="" value="" placeholder="Name" autofocus="autofocus"> </div> </div> </form>
<form> <div class="container wrap"> <div class="basis4 flex"> <div class="input"> <label for="">Name:</label> <input type="text" name="" value="" placeholder="Ex: Gustavo Quinalha"> </div> </div> </div> </form>
<form> <div class="container wrap"> <div class="basis4 flex"> <div class="input-group"> <div class="input-group-icon"> <i class="fa fa-user" aria-hidden="true"></i> </div> <input type="text" name="" value="" placeholder="Name"> </div> </div> </div> </form>
<form> <div class="container wrap"> <div class="basis4 flex"> <label for="">Name:</label> <div class="input-group"> <div class="input-group-icon"> <i class="fa fa-user" aria-hidden="true"></i> </div> <input type="mail" name="name" value="" placeholder="Ex: Gustavo"> </div> </div> </div> </form>
<form> <div class="container wrap"> <div class="basis4 flex"> <div class="container center-center"> <div class="basis1 text-right"> <label for="5name">Name: </label> </div> <div class="flex"> <div class="input-group"> <div class="input-group-icon"> <i class="fa fa-user" aria-hidden="true"></i> </div> <input type="mail" name="5name" id="5name" value="" placeholder="Ex: Gustavo"> </div> </div> </div> </div> </div> </form>
Just add form-validate in the container, and required in the input.
<form> <div class="container wrap"> <div class="basis4 flex form-validate"> <label for="name">Name:</label> <div class="input-group"> <div class="input-group-icon"> <i class="fa fa-user" aria-hidden="true"></i> </div> <input type="text" name="name" id="name" placeholder="Ex: Gustavo" required> </div> </div> </div> </form>
<form> <div class="container wrap"> <div class="form-validate basis4 flex"> <div class="input"> <label for="">Name:</label> <input type="text" name="" value="" placeholder="Ex: Gustavo Quinalha" required> </div> </div> </div> </form>